<template>
  <div v-show="showModal" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-justify-center c-aligni-end">
    <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
    <div ref="animationDom" class="c-w100 c-bg-white c-flex-column c-pz1 c-br-tl30 c-br-tr30">
      <div class="c-fs28 c-pt40 c-fc-xblack c-textAlign-c c-fw-b">操作</div>
      <section class="c-flex-row c-flexw-wrap c-pb48">
        <div class="c-pt50 c-ph36" v-show="!(isShowStudent != 1 && item.type == 'members')" v-for="item in operationList" :key="item.type">
          <div @click="clickItem(item.type)" class="c-bg-f6 c-brp50 c-ww80 c-hh80 c-flex-row c-flex-center">
            <i :class="item.icon" class="iconfont c-fs38 c-fc-xblack"></i>
          </div>
          <div @click="clickItem(item.type)" class="c-textAlign-c c-fs20 c-fc-sblack c-pt16">{{item.title}}</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
const OPERATION_LIST = [
  {
    type: 'index',
    icon: 'icon-shouye11',
    title: '首页'
  },
  {
    type: 'person',
    icon: 'icon-geren1',
    title: '个人中心'
  },
  {
    type: 'notice',
    icon: 'icon-qungonggao',
    title: '群公告'
  },
  {
    type: 'card',
    icon: 'icon-qungonggao',
    title: '群名片'
  },
  {
    type: 'members',
    icon: 'icon-qunchengyuan',
    title: '群成员'
  },
]
export default {
  components: {},
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    isShowStudent: {
      type: Number,
      default: 1
    },
  },
  data() {
    return {
      operationList: Object.freeze(OPERATION_LIST),
    };
  },
  watch: {
    showModal: {
      handler(val, oldVal) {
        if (val) {
          this.$refs.animationDom && this.$refs.animationDom.classList.remove('close-content');
          this.$refs.animationDom && this.$refs.animationDom.classList.add('open-content');
        }
      }
    },
  },
  methods: {
    closeModal(e) {
      this.$refs.animationDom && this.$refs.animationDom.classList.remove('open-content');
      this.$refs.animationDom && this.$refs.animationDom.classList.add('close-content');
      setTimeout(() => {
        this.$refs.animationDom && this.$refs.animationDom.classList.remove('close-content');
        this.$emit("closedModal");
      }, 100);
    },
    clickItem(type) {
      switch (type) {
        case 'index':
          this.$routerGo(this, "replace", { path: "/" });
          break;
        case 'person':
          this.$routerGo(this, "push", { path: "/member/memberIndex" });
          break;
        case 'notice':
          this.closeModal();
          this.$emit('clickShowNitice')
          break;
        case 'card':
          this.closeModal();
          this.$emit('clickShowCard')
          break;
        case 'members':
          this.closeModal();
          this.$emit('clickShowMembers')
          break;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
